<style>
	.page {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #000000;
	}

	.bg-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.bg-size {
		width: 750rpx;
		height: 750rpx;
	}

	.button-change-bg {
		background-color: #1e1e1e;
	}

	.button-change-bg-touched {
		background-color: #646262;
	}
</style>

<template>
	<view class="page">
		<view class="bg-wrapper" :style="{height: screenHeight + 'px'}">
			<image :src="faceUrl" class="bg-size" style="align-self: center;"></image>
			<view :class="{'button-change-bg':!changeTouched, 'button-change-bg-touched': changeTouched}"
				@touchstart="touchstartChange" @touchend="touchendChange" @click="changeFace()"
				style="width: 250rpx;height: 80rpx;border-radius: 50px;display: flex;flex-direction: column;justify-content: center;margin-top: 150rpx;align-self: center;">
				<text style="color: #FFFFFF;align-self: center;">更换头像</text>
			</view>
		</view>
	</view>
</template>

<script>
	var system = uni.getSystemInfoSync();
	var app = getApp();
	import userService from '@/service/user/UserService'
	import server from '@/config/server';
	export default {
		data() {
			return {
				faceUrl: app.getUser().avatar+"?d="+new Date().getTime(),
				changeTouched: false,
				screenHeight: system.safeArea.bottom,
			}
		},

		methods: {
			touchstartChange() {
				this.changeTouched = true;
			},

			touchendChange() {
				this.changeTouched = false;
			},

			uuid() {
				var s = [];
				var hexDigits = "0123456789abcdef";
				for (var i = 0; i < 36; i++) {
					s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
				}
				s[14] = "4";
				s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
				s[8] = s[13] = s[18] = s[23] = "-";
				var uuid = s.join("");
				return uuid;
			},

			// //更改头像
			// changeFace() {
			// 	var that = this;
			// 	//前端代码
			// 	uni.chooseImage({
			// 		// 只能选择一张图片
			// 		count: 1,
			// 		// 如果选择成功就会进入到success中来进行处理了
			// 		success(res) {
			// 			// res.tempFilePaths是一个临时文件
			// 			if (res.tempFilePaths.length > 0) {
			// 				// 取出你选中的文件
			// 				let filePath = res.tempFilePaths[0]
			// 				uniCloud.uploadFile({
			// 					filePath: filePath,
			// 					cloudPath: 'aaaaaaaaaa.jpg',
			// 					onUploadProgress: function(progressEvent) {
			// 						var percentCompleted = Math.round(
			// 							(progressEvent.loaded * 100) / progressEvent.total
			// 						);
			// 					},
			// 					async success (response) {
			// 						try{
			// 							// 文件上传到服务器回传给你的完整的文件地址
			// 							var fileID = response.fileID;
			// 							// 获取用户信息
			// 							var userinfo = app.getUser();
			// 							// 把这个头像地址使用ajax异步去更新和同步到数据库中
			// 							var userParams = {avatar:fileID,userId:userinfo.id}
			// 							var res = await userService.updateUserInfo(userParams);
			// 							if(res.code == 200){
			// 								// 把本地内存的头像进行变更
			// 								userinfo.avatar = fileID;
			// 								// 替换本地缓存中之前的用户信息
			// 								app.setUser(userinfo);
			// 								// 返回到个人首页
			// 								uni.navigateBack({
			// 									delta: 1,
			// 									animationType: "fade-out"
			// 								})
			// 							}
			// 						}catch(e){
			// 							uni.showToast({
			// 								title: e.message,
			// 								icon: "none",
			// 								duration: 3000
			// 							});
			// 						}
			// 					},
			// 					fail() {},
			// 					complete() {}
			// 				});
			// 			}
			// 		}
			// 	});

			// }


			// 更改头像
			changeFace() {
				var that = this;
				//前端代码
				uni.chooseImage({
					// 只能选择一张图片
					count: 1,
					// 如果选择成功就会进入到success中来进行处理了
					success(res) {
						// res.tempFilePaths是一个临时文件
						if (res.tempFilePaths.length > 0) {
							// 取出你选中的文件
							let filePath = res.tempFilePaths[0]
							try {
								var userinfo = app.getUser();
								var index = userinfo.avatar.lastIndexOf("/");
								var filename = userinfo.avatar.substring(index + 1);
								// 上传到minio中去 
								uni.uploadFile({
									// 指定服务器是上传的路径
									url: `${server.baseURL}/api/user/modifty/avatar/${userinfo.id}`, 
									// 你选择相册中的文件
									filePath: filePath,
									// 这个是服务器指定的接受文件的名字
									name: 'file',
									// 因为考虑到接口的安全性，所以用token进行鉴权，防止请求地址被别人所使用
									header:{
										"AuthToken":app.getToken(),
										"AuthUserId":app.getUserId()
									},
									// 上传过程中指定一些参数,方便你就行额外控制
									formData: {
										"bucketname":"userapp",
										"filename":"filename"
									},
									// 上传成功的回调
									success: (response) => {
										// 服务器上传成功的信息
										var res = JSON.parse(response.data); 
										console.log(response)
										if(res.code == 200){
											// 头像取出
											var {avatar} = res.data; //var avatar = res.data.avatar;
											// 把本地内存的头像进行变更
											userinfo.avatar = avatar;
											// 替换本地缓存中之前的用户信息
											app.setUser(userinfo);
											// 返回到个人首页
											uni.navigateBack({
												delta: 1,
												animationType: "fade-out"
											})
										}
									}
								});
							} catch (e) {
								console.log(e)
								uni.$u.toast("头像上传失败...")
							}
						}
					}
				});

			}
		}
	}
</script>
